1.3 CSS Basics: Adding Style to Mario's World
Welcome back, young adventurers! In our previous lesson, we built the basic structure of our Super Mario Bros. game using HTML. Now, it's time to add some color and style to Mario's world. We're going to dive into the magical realm of CSS (Cascading Style Sheets) and transform our plain HTML into a vibrant and exciting game scene!
What is CSS and Why Do We Need It?
Imagine you've built a house using only wooden beams and nails. It's sturdy, but it doesn't look very pretty, does it? That's where CSS comes in. CSS is like the paint, wallpaper, and decorations that make your house look beautiful and unique.
In web development, CSS is used to style and layout web pages. It tells the browser how to display HTML elements. With CSS, we can change colors, fonts, spacing, and even create animations!
How to Use CSS
There are three ways to use CSS in your HTML document:
- Inline CSS (directly in HTML elements)
- Internal CSS (using a
<style>tag in the<head>section) - External CSS (linking to a separate CSS file)
In our Super Mario Bros. game, we're using the internal CSS method. Let's take a closer look at our CSS code and learn some basic concepts.
CSS Syntax
CSS uses a simple syntax:
selector {
property: value;
}
- The
selectortargets HTML elements to style. - The
propertyis what you want to change (like color, size, or position). - The
valueis what you're setting the property to.
Let's look at some examples from our game:
body,
html {
margin: 0;
padding: 0;
height: 100%;
font-family: "Press Start 2P", cursive;
}
Here, we're targeting both the body and html elements. We're setting their margin and padding to 0, height to 100% of the viewport, and changing the font family to a cool pixelated font that looks just like the original Super Mario Bros. game!
Adding Custom Fonts
Speaking of fonts, did you notice this line in our HTML <head> section?
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
This is how we import a custom font from Google Fonts. The "Press Start 2P" font gives our game that authentic retro look!
Styling the Game Container
Let's look at how we style our main game container:
.game-container {
width: 100%;
height: 100%;
background-color: #5c94fc;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}
- We set the
widthandheightto 100% so it fills the entire screen. - The
background-coloris set to a light blue (#5c94fc) to represent the sky. - We use
position: relativeso we can position other elements inside it absolutely. overflow: hiddenensures nothing spills outside our game container.- The
box-shadowproperty adds a subtle dark shadow around the edges, giving depth to our scene.
Positioning Elements
CSS allows us to position elements precisely where we want them. Let's look at how we position Mario:
.mario {
position: absolute;
z-index: 1;
bottom: 150px;
left: 50px;
width: 35px;
height: 40px;
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario.png");
background-size: cover;
}
position: absoluteallows us to position Mario exactly where we want him relative to the game container.z-index: 1ensures Mario appears in front of other elements.bottom: 150pxandleft: 50pxposition Mario 150 pixels from the bottom and 50 pixels from the left of the game container.- We set Mario's
widthandheight. - We use a
background-imageto display Mario's sprite andbackground-size: coverto make sure it fits perfectly.
Creating the Ground
To create the ground Mario walks on, we use this CSS:
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/ground.jpg");
background-repeat: repeat-x;
background-size: contain;
}
The background-repeat: repeat-x property makes the ground texture repeat horizontally, creating an endless floor for Mario to run on.
Adding Decorative Elements
To make our game world more interesting, we've added clouds, hills, and question blocks. Let's look at the cloud CSS:
.cloud {
position: absolute;
top: 200px;
right: 200px;
width: 140px;
height: 100px;
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/cloud.png");
background-size: contain;
}
We position the cloud absolutely, set its size, and use a background image to display it.
Creating the Game HUD (Heads-Up Display)
The HUD shows the player's score, coins, world, time, and lives. We style it like this:
.stats {
display: flex;
justify-content: space-around;
padding: 8px;
color: white;
font-size: 22px;
font-weight: bold;
text-align: center;
}
We use display: flex and justify-content: space-around to evenly space out the HUD elements across the top of the screen.
Complete Example
Now, let's put it all together! Here's our complete Super Mario Bros. game scene with CSS styling:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Super Mario Bros.</title>
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
font-family: "Press Start 2P", cursive;
}
.game-container {
width: 100%;
height: 100%;
background-color: #5c94fc;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}
.stats {
display: flex;
justify-content: space-around;
padding: 8px;
color: white;
font-size: 22px;
font-weight: bold;
text-align: center;
}
.title {
position: absolute;
top: 200px;
left: 100px;
background-color: #e86a17;
color: #ffd8d8;
padding: 16px;
font-size: 52px;
font-weight: bold;
text-align: left;
line-height: 70px;
border-radius: 8px;
text-shadow: 8px 8px #000;
box-shadow: 4px 4px #000;
}
.copyright {
position: absolute;
top: 382px;
left: 426px;
color: #ffd8d8;
font-size: 20px;
}
.cloud {
position: absolute;
top: 200px;
right: 200px;
width: 140px;
height: 100px;
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/cloud.png");
background-size: contain;
}
.block {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid #000;
text-align: center;
line-height: 40px;
}
.block1,
.block3,
.block5 {
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/block.png");
background-size: cover;
}
.block2,
.block4 {
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/question_block.gif");
background-size: cover;
}
.block1 {
bottom: 300px;
right: 320px;
}
.block2 {
bottom: 300px;
right: 280px;
}
.block3 {
bottom: 300px;
right: 240px;
}
.block4 {
bottom: 300px;
right: 200px;
}
.block5 {
bottom: 300px;
right: 160px;
}
.mario {
position: absolute;
z-index: 1;
bottom: 150px;
left: 50px;
width: 35px;
height: 40px;
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario.png");
background-size: cover;
}
.goomba {
position: absolute;
z-index: 1;
bottom: 150px;
left: 500px;
width: 40px;
height: 40px;
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/goomba.gif");
background-size: cover;
}
.hill {
position: absolute;
bottom: 150px;
width: 300px;
height: 150px;
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/hill.png");
background-size: cover;
border-radius: 50% 50% 0 0;
}
.hill1 {
left: 0px;
}
.hill2 {
right: 200px;
width: 200px;
height: 100px;
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/ground.jpg");
background-repeat: repeat-x;
background-size: contain;
}
</style>
</head>
<body>
<div class="game-container">
<div class="stats">
<span>SCORE<br />0</span>
<span>COINS<br />0</span>
<span>WORLD<br />1-1</span>
<span>TIME<br />378</span>
<span>LIVES<br />3</span>
</div>
<div class="title">SUPER<br />MARIO BROS.</div>
<div class="copyright">©1985 NINTENDO</div>
<div class="cloud"></div>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
<div class="block block5"></div>
<div class="mario"></div>
<div class="goomba"></div>
<div class="hill hill1"></div>
<div class="hill hill2"></div>
<div class="ground"></div>
</div>
<script>
const mario = document.querySelector(".mario");
let position = 50;
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowRight") {
position += 10;
mario.style.left = `${position}px`;
} else if (e.key === "ArrowLeft") {
position -= 10;
mario.style.left = `${position}px`;
}
});
</script>
</body>
</html>
Wow! Look at how our game has transformed with just a bit of CSS magic. We've taken our plain HTML structure and turned it into a colorful, nostalgic Super Mario Bros. scene. Let's break down what we've accomplished:
- We've set up a game container that fills the entire screen and has a blue sky background.
- We've added a custom retro font to give our game that authentic 8-bit look.
- We've created a HUD (Heads-Up Display) at the top of the screen to show game stats.
- We've positioned Mario, a Goomba enemy, question blocks, hills, and clouds in our scene.
- We've added a ground texture at the bottom of the screen for Mario to walk on.
- We've even included the iconic Super Mario Bros. title and copyright notice!
Conclusion
CSS is a powerful tool that allows us to bring our HTML to life. We've only scratched the surface of what's possible with CSS, but you can already see how it transforms a basic structure into something that looks like a real game.
Additional Resources
For further reading and to deepen your understanding of CSS, check out these resources:
In our next lesson, we'll dive into JavaScript and start adding some interactivity to our game. We'll make Mario move, add collision detection, and start turning this static scene into a playable game!
Remember, becoming a great game developer (or any kind of developer) takes practice. Don't be afraid to experiment with the CSS we've learned today. Try changing colors, moving elements around, or even adding your own elements to the scene. The more you play and experiment, the better you'll understand how CSS works.